<template>
  <BlueBackground :title="'我的订单'">
    <div class="indent-box">
      <van-tabs v-model="active">
        <van-tab title="全部">
          <div class="goods-box" v-for="item in allOrders" :key="item.id">
            <van-cell :title="item.order_no">
              <template
                #right-icon
                v-if="item.status !== MyOrderPageOrderStatusEnum.finished"
              >
                <div class="right-value" @click="methods.confirm(item)">
                  确认收货
                </div>
              </template>
              <template #right-icon v-else>
                <div class="right-value">已完成</div>
                <van-icon
                  name="delete-o"
                  class="delete-o"
                  @click="methods.delOrder(item)"
                />
              </template>
            </van-cell>
            <OrderItem
              v-for="v in allOrdersKeys[item.order_no]
                ? item.items
                : item.items.slice(0, 2)"
              :key="v.id"
              :mes="v"
            />
            <div
              class="more"
              v-if="item.items?.length > 3"
              @click="
                allOrdersKeys[item.order_no] = !allOrdersKeys[item.order_no]
              "
            >
              {{ allOrdersKeys[item.order_no] ? '点击收回' : '显示更多' }}
            </div>
            <OrderBottom
              :shop-arr="item.items"
              :time="item.items[0].updatedAt"
            />
          </div>
          <van-empty v-if="allOrders.length === 0" description="当前没有订单" />
        </van-tab>
        <van-tab title="进行中">
          <div class="goods-box" v-for="item in doingOrders" :key="item.id">
            <van-cell :title="item.order_no">
              <template #right-icon>
                <div class="right-value" @click="methods.confirm(item)">
                  确认收货
                </div>
              </template>
            </van-cell>
            <OrderItem
              v-for="v in doingOrdersKeys[item.order_no]
                ? item.items
                : item.items.slice(0, 2)"
              :key="v.id"
              :mes="v"
            />
            <div
              class="more"
              v-if="item.items?.length > 3"
              @click="
                doingOrdersKeys[item.order_no] = !doingOrdersKeys[item.order_no]
              "
            >
              {{ doingOrdersKeys[item.order_no] ? '点击收回' : '显示更多' }}
            </div>
            <OrderBottom
              :shop-arr="item.items"
              :time="item.items[0].updatedAt"
            />
          </div>
          <van-empty
            v-if="doingOrders.length === 0"
            description="没有正在进行的订单"
          />
        </van-tab>
        <van-tab title="已完成">
          <div class="goods-box" v-for="item in finishedOrders" :key="item.id">
            <van-cell :title="item.order_no">
              <template #right-icon>
                <div class="right-value">已完成</div>
                <van-icon
                  name="delete-o"
                  class="delete-o"
                  @click="methods.delOrder(item)"
                />
              </template>
            </van-cell>
            <OrderItem
              v-for="v in finishedOrdersKeys[item.order_no]
                ? item.items
                : item.items.slice(0, 2)"
              :key="v.id"
              :mes="v"
            />
            <div
              class="more"
              v-if="item.items?.length > 3"
              @click="
                finishedOrdersKeys[item.order_no] =
                  !finishedOrdersKeys[item.order_no]
              "
            >
              {{ finishedOrdersKeys[item.order_no] ? '点击收回' : '显示更多' }}
            </div>
            <OrderBottom
              :shop-arr="item.items"
              :time="item.items[0].updatedAt"
            />
          </div>
          <van-empty
            v-if="Object.keys(finishedOrders).length === 0"
            description="没有已完成的订单"
          />
        </van-tab>
      </van-tabs>
    </div>
  </BlueBackground>
</template>

<script lang="ts" setup>
import OrderItem from '@/components/OrderItem.vue'
import BlueBackground from '@/components/BlueBackground.vue'
import OrderBottom from '@/components/OrderBottom.vue'
import { DELETE, GET, postFormData } from '@/api'
import { onMounted, ref } from 'vue'
import { showSuccessToast } from 'vant'
import { MyOrderPageOrderStatusEnum } from './enum'

const active = ref(0)
const allOrders = ref<Record<string, any>[]>([])
const finishedOrders = ref<Record<string, any>[]>([])
const doingOrders = ref<Record<string, any>[]>([])
const allOrdersKeys = ref<Record<string, any>>({})
const finishedOrdersKeys = ref<Record<string, any>>({})
const doingOrdersKeys = ref<Record<string, any>>({})

const methods = {
  getOrders(type?: MyOrderPageOrderStatusEnum) {
    const status = type
    GET({
      url: '/order/list',
      params: {
        status
      }
    })
      .then((res) => {
        // console.log({ res })
        const arr = res.data.list
        const orderDataId: Record<string, any> = {}
        arr.forEach((item) => {
          orderDataId[item.order_no] = item.items.length < 3
        })
        if (!type) {
          allOrdersKeys.value = {}
          allOrders.value =
            res.data?.list?.map((item) => {
              return {
                ...item,
                items: item.items.map((cItem) => {
                  return {
                    ...cItem,
                    image_url:
                      import.meta.env.VITE_APP_PROXY_URL + cItem.image_url
                  }
                })
              }
            }) ?? []
          allOrdersKeys.value = orderDataId
        } else if (type == MyOrderPageOrderStatusEnum.finished) {
          finishedOrdersKeys.value = {}

          finishedOrders.value =
            res.data?.list?.map((item) => {
              return {
                ...item,
                items: item.items.map((cItem) => {
                  return {
                    ...cItem,
                    image_url:
                      import.meta.env.VITE_APP_PROXY_URL + cItem.image_url
                  }
                })
              }
            }) ?? []
          finishedOrdersKeys.value = orderDataId
        } else if (type == MyOrderPageOrderStatusEnum.doing) {
          doingOrdersKeys.value = {}

          doingOrders.value =
            res.data?.list?.map((item) => {
              return {
                ...item,
                items: item.items.map((cItem) => {
                  return {
                    ...cItem,
                    image_url:
                      import.meta.env.VITE_APP_PROXY_URL + cItem.image_url
                  }
                })
              }
            }) ?? []
          doingOrdersKeys.value = orderDataId
        }
      })
      .catch((err) => {
        console.error(err)
      })
  },
  confirm(item) {
    const id = item.id
    postFormData({
      url: '/order/finish',
      params: {
        id
      }
    })
      .then(() => {
        showSuccessToast('确认收货成功')
        methods.getOrders()
        methods.getOrders(MyOrderPageOrderStatusEnum.doing)
        methods.getOrders(MyOrderPageOrderStatusEnum.finished)
      })
      .catch((err) => {
        console.error(err)
      })
  },
  delOrder(item) {
    const id = item.id
    DELETE({
      url: '/order/delete',
      params: {
        id
      }
    })
      .then(() => {
        showSuccessToast('删除成功')
        methods.getOrders()
        methods.getOrders(MyOrderPageOrderStatusEnum.doing)
        methods.getOrders(MyOrderPageOrderStatusEnum.finished)
      })
      .catch((err) => {
        console.error(err)
      })
  }
}

onMounted(() => {
  methods.getOrders()
  methods.getOrders(MyOrderPageOrderStatusEnum.doing)
  methods.getOrders(MyOrderPageOrderStatusEnum.finished)
})
</script>

<style lang="less" scoped>
.indent-box {
  padding: 0 20px;
  .van-tabs {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
  }
  .goods-box {
    background-color: #fff;
    margin-bottom: 20px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
    .more {
      text-align: right;
      color: rgb(12, 52, 186);
      padding-right: 20px;
      font-size: 14px;
    }
  }
}
:deep(.van-tab--active) {
  color: rgb(12, 52, 186);
}
:deep(.van-tabs__line) {
  background-color: rgb(12, 52, 186);
}
:deep(.right-value) {
  color: #000;
  padding-right: 10px;
}
.delete-o {
  font-size: 16px;
  line-height: inherit;
}
</style>
